<template>
  <div class="div-one">
    <div class="div-two">
      <el-row :gutter="20">
        <el-col :span="5"
          ><el-input placeholder="根据学科名称搜索" v-model="formBase.subjectName" ></el-input
        ></el-col>
        <el-col :span="16"
          ><el-button @click="trim">清空</el-button><el-button type="primary" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="2"
          ><el-button type="success" icon="el-icon-edit" @click="add"
            >新增学科</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="div-res">
      <i class="el-icon-info">共{{total}}条记录</i>
    </div>
    <!-- 表格部分 -->
    <div>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="id" label="序号" width="100" align="center">
          <template #default="{$index}">
            <span>{{$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200" align="center">
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="120" align="center">
          <template #default="{row}">
            <span>{{ row.isFrontDisplay ? '是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="120" align="center">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="180" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
           <template #default="{row}">
            <el-button  type="text" @click="goTo">学科分类</el-button>
            <el-button  type="text" @click="geoToTags">学科标签</el-button>
            <el-button  type="text" @click="edit(row.id)">修改</el-button>
            <el-button  type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="div-button">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryObj.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
  <SubAdd  ref="subAdd" :formBase="formBase" :text="text" :pageTitle="pageTitle"

     :ruleInline="ruleInline" @newDataes="newDataes" @handleCloseModal="handleCloseModal"></SubAdd>
  </div>
</template>

<script>

import { list, remove, detail } from '@/api/hmmm/subjects.js'
import SubAdd from '../components/subjects-add.vue'
export default {
  props: {},
  data () {
    return {
      tableData: [],
      formBase: {
        subjectName: '',
        isFrontDisplay: 1
      },
      ruleInline: {
        subjectName: [{ required: true, message: '学科名称不能为空', trigger: 'blur' }]
      },
      queryObj: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      drawerType: 'add',

      text: '',
      pageTitle: ''

    }
  },
  components: {
    SubAdd
  },
  created () {
    this.dataInfo()
  },

  methods: {
    // 渲染主页面
    async dataInfo () {
      const { data } = await list(this.queryObj)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 分页
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.dataInfo()
    },
    // 每页多少条
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.dataInfo()
    },

    // 清空
    trim () {
      this.formBase.subjectName = ''
      this.dataInfo()
    },
    // 搜索
    async search () {
      const subjectName = this.formBase.subjectName
      const { data } = await list({ subjectName })
      this.tableData = data.items
    },

    //
    goTo () {
      this.$router.push('directorys')
    },
    geoToTags () {
      this.$router.push('tags')
    },

    //
    async del (id) {
      // console.log(id)
      await remove({ id })
      this.$message.success('删除成功')
      this.dataInfo()
    },

    //
    // add () {
    //   this.titleInfo.text = '新增'
    //   this.titleInfo.pageTitle = '学科'
    //   this.$refs.subAdd.dialogFormV()
    // }
    add () {
      this.$refs.subAdd.dialogFormV()
      this.text = '新增'
      this.pageTitle = '学科'
    },
    newDataes (formBase) {
      this.queryObj.page = 1
      this.queryObj.pagesize = 10
      this.dataInfo()
    },
    //
    handleCloseModal () {
      this.$refs.subAdd.dialogFormH()
      this.$refs.subAdd.fun()
    },
    //
    async edit (id) {
      // console.log(id)
      this.formBase.id = id
      this.text = '编辑'
      this.pageTitle = '用户'
      const { data } = await detail(this.formBase)
      // console.log(data)
      this.formBase.subjectName = data.subjectName
      this.formBase.isFrontDisplay = data.isFrontDisplay
      this.$refs.subAdd.dialogFormV()
    }
  },

  computed: {

  }
}
</script>

<style scoped lang="less">
.div-one {
  padding: 20px;
  .div-two {
    padding: 20px;
    background-color: #fff;
  }
  .div-res {
    padding: 20px;
  }
  .div-button {
    background-color: #fff;
    padding: 20px 0;
    padding-left: 600px;
  }
}
</style>
